<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/layout-style.css">
    <link rel="stylesheet" href="../css/container-style.css">
    <link rel="stylesheet" href="../css/card.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bbs.css">
    <link rel="stylesheet" href="../css/input-box.css">
    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
</head>

<body>

    <div id="app">
        <el-backtop></el-backtop>
        <div class="head">
            <el-row>
                <el-col :span="20">
                    <div class="grid-content bg-purple-dark"></div>
                </el-col>
                <el-col :span="1">
                    <div class="mt-5">
                        <el-avatar src="../imgs/标题海报.png"></el-avatar>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="mb-5">
                        <el-dropdown>
                            <span class="el-dropdown-link uname">
                                用户名<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="bg">
            <div class="center">
                <!-- Layout布局 -->
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple"><img class="img-head" src="../imgs/标题海报.png"></div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bbs-menu">
                            <el-button class="mt-5" type="info" plain> 全部帖子 </el-button>
                            <el-button type="info" plain>攻略帖子 </el-button>
                            <el-button type="info" plain>公告帖子 </el-button>
                            <el-button type="info" plain>词条帖子 </el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20">
                        <div class="mt-5"></div>
                    </el-col>
                    <el-col :span="4">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                        </el-input>
                    </el-col>
                </el-row>

                <!-- container模板 -->
                <el-container class="bbs-back">
                    <el-container>
                        <el-header>
                            <div class="bbs-b">
                                <el-button type="danger">更新</el-button>论坛公告3/10日（周四更新）
                            </div>
                        </el-header>
                        <el-header class="mt-5">
                            <div class="bbs-b">
                                <el-button type="danger">更新</el-button>论坛公告3/3日（周四更新）
                            </div>
                        </el-header>
                        <el-header class="mt-5">
                            <div class="bbs-b">
                                <el-button type="danger">更新</el-button>论坛公告2/24日（周四更新）
                            </div>
                        </el-header>
                    </el-container>

                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>论坛介绍</span>
                        </div>
                        <div class="text item">
                            <p>这里是植物大战僵尸的兴趣爱好者的营地，欢迎大家加入</p>
                        </div>
                    </el-card>
                </el-container>

                <!-- 帖子模块 -->
                <el-container>
                    <el-container>

                        <el-footer class="bbs-uavatar" height="60px">
                            <el-avatar class="mt-10" src=" https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png ">
                            </el-avatar>
                            <p class="bbs-uname">用户名</p>
                        </el-footer>
                        <el-footer class="bbs-color" height="35px">
                            <p class="bbs-title">大佬们，撑到23波了，还能到几波</p>
                        </el-footer>
                        <el-container>
                            <el-main class="bbs-color" style="height: 70px;">
                                <p class="bbs-text ">我看那些冲关三炮改都是选择机枪路旁双曾，按理来说机枪路火力更强双曾为何放上，感觉正常无尽也不差这一个曾对抗冰车</p>
                            </el-main>
                            <el-footer class="bbs-color" height="100px">
                                <img src="../imgs/论坛/论坛1.jpg" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/06.png" class="bbs-img" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/05.png" class="bbs-imgs" height="100px" width="150px" style="background-size: cover;">
                            </el-footer>
                        </el-container>
                        <el-footer height="30px" class="bbs-color">
                            <div class="bbs-ico bss">
                                <el-link icon="el-icon-chat-dot-round">265</el-link>
                            </div>
                        </el-footer>
                    </el-container>
                    <el-aside width="13.4% " class="bbs-color"></el-aside>
                </el-container>


                <el-container>
                    <el-container>

                        <el-footer class="bbs-uavatar" height="60px">
                            <el-avatar class="mt-10" src=" https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png ">
                            </el-avatar>
                            <p class="bbs-uname">用户名</p>
                        </el-footer>
                        <el-footer class="bbs-color" height="35px">
                            <p class="bbs-title">想在北美玩冰变奏的可以试试</p>
                        </el-footer>
                        <el-container>
                            <el-main class="bbs-color" style="height: 70px;">
                                <p class="bbs-text ">原作者b站白瞰路 由于北美特性，原版许多需要冰变奏的阵放到北美会打得很难受，所以才有了此阵 采用ch5节奏，每次用三门炮保持稳定刷新（当然也可以用p3/4/5）
                                </p>
                            </el-main>
                            <el-footer class="bbs-color" height="100px">
                                <img src="../imgs/bbs/01.jpg" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/02.jpg" class="bbs-img" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/03.jpg" class="bbs-imgs" height="100px" width="150px" style="background-size: cover;">
                            </el-footer>
                        </el-container>
                        <el-footer height="30px" class="bbs-color">
                            <div class="bbs-ico bss">
                                <el-link icon="el-icon-chat-dot-round">265</el-link>
                            </div>
                        </el-footer>
                    </el-container>
                    <el-aside width="13.4% " class="bbs-color"></el-aside>
                </el-container>

                <el-container>
                    <el-container>

                        <el-footer class="bbs-uavatar" height="60px">
                            <el-avatar class="mt-10" src=" https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png ">
                            </el-avatar>
                            <p class="bbs-uname">用户名</p>
                        </el-footer>
                        <el-footer class="bbs-color" height="35px">
                            <p class="bbs-title">这e版支线是人玩的?</p>
                        </el-footer>
                        <el-container>
                            <el-main class="bbs-color" style="height: 70px;">
                                <p class="bbs-text ">打到6-1了。这一关前六排全是墓碑。它冒的都比我吞的快。金盏花产的毁灭菇也没地方种。我用了无冷却和无限阳光的超能力都打不过</p>
                            </el-main>
                            <el-footer class="bbs-color" height="100px">
                                <img src="../imgs/bbs/02.jpg" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/03.jpg" class="bbs-img" height="100px" width="150px" style="background-size: cover;">
                                <img src="../imgs/bbs/04.jpg" class="bbs-imgs" height="100px" width="150px" style="background-size: cover;">
                            </el-footer>
                        </el-container>
                        <el-footer height="30px" class="bbs-color">
                            <div class="bbs-ico bss">
                                <el-link icon="el-icon-chat-dot-round">265</el-link>
                            </div>
                        </el-footer>
                    </el-container>
                    <el-aside width="13.4% " class="bbs-color"></el-aside>
                </el-container>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>

                <el-button @click="drawer=true " type="primary " style="margin-left: 16px; " class="post">
                    发帖
                </el-button>
                <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false " :direction="direction">
                    <span>
                        <div class="textbox">
                            <div class="headline">
                                <p>帖子标题</p>
                            </div>
                            <input class="hlp" />
                            <textarea class="put"></textarea>
                            <div class="send">
                                <el-button>发送帖子</el-button>
                            </div>
                        </div>
                    </span>
                </el-drawer>
            </div>
        </div>
    </div>

</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            value: true,
            input: '',
            drawer: false,
            direction: 'btt'
        }
    })
</script>

</html>